<template>
	<view class="container">
		<view class="header">
			<view class="date-range-picker">
				<uni-datetime-picker v-model="range" type="daterange" />
				<button @click="initData" class="query-button">查询</button>
			</view>

			<text class="title">加油记录</text>
			<text class="subtitle">共{{total}}条记录</text>
		</view>

		<uni-list class="modern-list">
			<uni-list-item v-for="(item, index) in feulrecord" :key="index" link to="/edit" @click="itemclick(item)"
				class="list-card">
				<template v-slot:body>
					<view class="list-item">
						<view class="left-section">
							<view class="driver-info">
								<uni-icons type="person-filled" size="20" color="#1890ff"></uni-icons>
								<text class="name">{{item.driverinfo && item.driverinfo.name }}</text>
							</view>
							<view class="time-info">
								<uni-icons type="calendar" size="16" color="#8c9fad"></uni-icons>
								<text class="date">{{formatDate(item.fuelDate) }}</text>
							</view>
						</view>
						<view class="right-section">
							<view class="amount-card">
								<text class="cost-label">加油金额</text>
								<text class="cost">¥{{ item.cost }}</text>
							</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<view v-if="feulrecord.length === 0 && !loading" class="empty-state">
			<image src="/static/avatar/empty.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无加油记录</text>
			<button class="empty-btn" @click="fabClick">立即添加</button>
		</view>

		<view class="load-status">
			<text v-if="loading">加载中...</text>
			<text v-else-if="isEnd && feulrecord.length > 0">已加载全部数据</text>
		</view>

		<uni-fab ref="fab" horizontal="right" vertical="bottom"
			:pattern="{color: '#fff', backgroundColor: '#1890ff', selectedColor: '#fff'}" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feulrecord: [],
				page: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				isEnd: false,
				range: ['', '']
			};
		},
		onLoad() {
			this.initData()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			getDateFromPicker(value) {
				const date = new Date(value);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			async initData(reset = true) {
				if (reset) {
					this.page = 1;
					this.isEnd = false;
				}
				let userinfo = uni.getStorageSync('userInfo');
				// console.log('请求参数:', {
				// 	name: userinfo.username,
				// 	page: this.page,
				// 	pageSize: this.pageSize,
				// 	startDate: this.range[0],
				// 	endDate: this.range[1]
				// });
				
				const obj = uniCloud.importObject('driver');
				try {
					this.loading = true;
					uni.showLoading({
						title: '加载中...'
					});
					const res = await obj.getFuelRecordByName({
						name: userinfo.username,
						page: this.page,
						pageSize: this.pageSize,
						startDate: new Date(this.range[0]),
						endDate: new Date(this.range[1])
					});
					if (res.code === 0) {
						this.total = res.total;
						this.feulrecord = reset ? res.data : [...this.feulrecord, ...res.data];
						this.isEnd = this.feulrecord.length >= this.total;
					}
				} finally {
					this.loading = false;
					uni.hideLoading();
				}
			},

			async loadMore() {
				if (this.loading || this.isEnd) return;
				this.page++;
				await this.initData(false);
			},

			formatDate(dateStr) {
				return uni.$dayjs(dateStr).format('YYYY-MM-DD HH:mm')
			},
			fabClick() {
				uni.$router.to({
					url: '/pagesC/driver/fuel/add',
				})
			},
			itemclick(record) {
				uni.$router.to({
					url: '/pagesA/driver/fuel/detail',
					params: {
						// _id: _id
						record:record
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	/* 新增样式 */
	.date-filter-btn {
		background: #f5fbff;
		border: 1rpx solid #1890ff;
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		font-size: 26rpx;
		color: #1890ff;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		uni-icons {
			margin-right: 8rpx;
		}
	}

	.load-status {
		text-align: center;
		padding: 20rpx;
		color: #8c9fad;
		font-size: 24rpx;
		height: 80rpx;
	}

	/* 原有样式保持不变 */
	.container {
		padding: 24rpx;
		background: linear-gradient(180deg, #f0f9ff 0%, #e6f7ff 100%);
		min-height: 100vh;
	}

	.header {
		padding: 20rpx 24rpx 30rpx;

		.title {
			font-size: 42rpx;
			font-weight: 100%;
			color: #1a2a3a;
			display: block;
			line-height: 1.4;
		}

		.subtitle {
			font-size: 26rpx;
			color: #8c9fad;
		}
	}

	.modern-list {
		background: transparent !important;

		.list-card {
			margin: 16rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0 6rpx 24rpx rgba(24, 144, 255, 0.08);
			transition: all 0.3s ease;
			border: none !important;
			overflow: hidden;
			border-left: 8rpx solid #1890ff !important;

			&:active {
				transform: translateY(4rpx);
				box-shadow: 0 2rpx 12rpx rgba(24, 144, 255, 0.15);
			}

			&::after {
				display: none !important;
			}
		}
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;

		.left-section {
			flex: 1;

			.driver-info {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.name {
					font-size: 34rpx;
					color: #1A2A3A;
					font-weight: 600;
					margin-left: 12rpx;
				}
			}

			.time-info {
				display: flex;
				align-items: center;
				background: #f5fbff;
				padding: 6rpx 16rpx;
				border-radius: 12rpx;
				width: fit-content;

				.date {
					font-size: 26rpx;
					color: #5a8bad;
					margin-left: 8rpx;
				}
			}
		}

		.right-section {
			margin-left: 32rpx;

			.amount-card {
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
				border-radius: 20rpx;
				padding: 16rpx 24rpx;
				text-align: center;
				min-width: 180rpx;
				box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.2);

				.cost-label {
					display: block;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.85);
					margin-bottom: 4rpx;
				}

				.cost {
					font-size: 36rpx;
					color: #fff;
					font-weight: 800;
					text-shadow: 0 2rpx 4rpx rgba(0, 80, 179, 0.3);
				}
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 48rpx;
		text-align: center;

		.empty-image {
			width: 300rpx;
			height: 300rpx;
			opacity: 0.9;
			margin-bottom: 40rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #5a8bad;
			margin: 0 0 40rpx;
			letter-spacing: 1rpx;
			font-weight: 500;
		}

		.empty-btn {
			background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 500;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 50rpx;
			padding: 0 80rpx;
			box-shadow: 0 10rpx 30rpx rgba(24, 144, 255, 0.4);
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.3);
			}
		}
	}

	.date-range-picker {
		display: flex;
		align-items: center;
		background-color: #f5fbff;
		border: 1rpx solid #1890ff;
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #1890ff;

		.date-picker {
			flex: 1;
			/* 占据剩余空间 */
			min-width: 0;

			/* 允许内容压缩 */
			::v-deep .uni-datetime-picker-input {
				font-size: 24rpx !important;
				/* 减小字体确保显示完整 */
				padding: 0 10rpx !important;
				/* 减少内边距 */
			}
		}

		.query-button {
			background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
			color: #fff;
			border: none;
			border-radius: 40rpx;
			padding: 0 30rpx;
			height: 64rpx;
			/* 减小高度 */
			line-height: 64rpx;
			font-size: 26rpx;
			/* 减小字体 */
			font-weight: 500;
			box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.2);
			transition: all 0.3s;
			margin-left: 16rpx;
			flex-shrink: 0;
			/* 防止按钮被压缩 */

			&:active {
				transform: scale(0.98);
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			}
		}
	}
</style>